<template>
  <el-menu :default-active="$route.path" mode="vertical" :unique-opened="true" router>
    <div v-for="(item, index) in menu">
      <el-submenu v-if="item.type === '0'"
                  :index="index + 1"
                  :key="'menu-item-' + index">
        <template slot="title"><i :class="item.icon" style="font-size: 18px; padding-right: 5px;"></i>{{item.name}}</template>
        <el-menu-item v-for="(subItem, subIndex) in item.children"
                      :index="subItem.path"
                      :key="'menu-item-' + index + '-' + subIndex"
                      ><i :class="subItem.icon"></i>&nbsp;&nbsp;{{subItem.name}}
        </el-menu-item>
<!--        @click="clickMenu(subItem.name, subItem.path)"-->
      </el-submenu>
<!--      @click="clickMenu(item.name, item.path)"-->
      <el-menu-item v-else :index="item.path" :key="item.name"><i
        :class="item.icon"></i>&nbsp;&nbsp;{{item.name}}
      </el-menu-item>
    </div>
  </el-menu>
</template>

<script>
  import {menuApi} from '../../http/modules/menu'
  import {mapState} from 'vuex'
  import store from '../../store/index'
  import loadingRoutes from './loadingRoutes'

  export default {
    name: "asideMenu",
    data() {
      return {
        openedTab: [],
      }
    },
    computed: {
      ...mapState({
        menu: state => state.menu.navTree
      })
    },
    methods: {
      findMenuTree() {
        let roles = store.getters.roles
        menuApi.findNavTree(roles).then(res => {
          this.$store.commit('setNavTree', res.data)

          let routers = this.addDynamicMenuRoutes(res.data)
          for (let i = 0; i < routers.length; i++) {
            this.$router.options.routes[0].children.push(routers[i])
          }
          this.$router.addRoutes(this.$router.options.routes)

        }).catch(error => {
          console.log(error)
        })
      },
      /**
       * 添加动态(菜单)路由
       * @param {*} menuList 菜单列表
       * @param {*} routes 递归创建的动态(菜单)路由
       */
      addDynamicMenuRoutes (menuList = [], routes = []) {
        var temp = []
        for (var i = 0; i < menuList.length; i++) {
          if (menuList[i].children && menuList[i].children.length >= 1) {
            temp = temp.concat(menuList[i].children)
          } else if (menuList[i].path) {
            // 创建路由配置
            var route = {
              path: menuList[i].path,
              component: null,
              name: menuList[i].name,
              meta: {
                menuId: menuList[i].menuId,
                title: menuList[i].name,
                isDynamic: true,
                isTab: true,
                iframeUrl: ''
              }
            }
            let src = menuList[i].path
              try {
                // 根据菜单URL动态加载vue组件，这里要求vue组件须按照url路径存储
                // 如url="sys/user"，则组件路径应是"@/views/sys/user.vue",否则组件加载不到
                if (src.includes('iframe') || src.includes('http') || src.includes('https')) {
                  // let component = menuList[i].component
                  // route['component'] = loadingRoutes(component)
                } else {
                  let component = menuList[i].component
                  route['component'] = loadingRoutes(component)
                }

              } catch (e) {
                console.log(e)
              }
            routes.push(route)
          }
        }
        if (temp.length >= 1) {
          this.addDynamicMenuRoutes(temp, routes)
        } else {
          console.log(routes)
        }
        return routes
      }
    },
    created() {
      this.findMenuTree()
    }
  }
</script>

<style scoped>

</style>
